<template>
  <div class="Professional animated fadeInUp">
    <projectlist
      :title="'素材中心'"
      :type="2"
      :projectlist="dataList.materialList"
      :subtitle="'Material center'"
    >
      <template v-slot:tabs>
        <div class="tab_list">
          <nav class="course_list">
            <p>所属课程：</p>
            <li style="white-space: pre-wrap; word-break: break-all">
              <span
                :class="{ isactive: dataList.course == '' }"
                @click="getCourse(0)"
              >
                全部
              </span>

              <el-checkbox-group>
                <span
                  style="
                    display: inline-block;
                    line-height: 1;
                    vertical-align: middle;
                    margin-bottom: 15px;
                  "
                  :class="{ isactive: item.id == dataList.course }"
                  v-for="(item, cindex) in dataList.courseList"
                  @click="getCourse(item.id)"
                >
                  {{ item.name }}
                </span>
              </el-checkbox-group>

              <!-- <el-checkbox-group v-model="dataList.course" size="large" >
								<el-checkbox-button v-for="item in dataList.mediaList" :key="item.id" :label="item.id" @change="getCourse(item.id)">
									{{ item.name }}
								</el-checkbox-button>
							</el-checkbox-group> -->
            </li>
          </nav>
          <nav class="media_list">
            <p>媒体类型：</p>
            <li>
              <span
                :class="{ isactive: dataList.media.length == 0 }"
                @click="getMedia()"
              >
                全部
              </span>
              <el-checkbox-group
                v-model="dataList.media"
                size="large"
                @change="changeUse"
              >
                <el-checkbox-button
                  v-for="city in dataList.mediaList"
                  :key="city.id"
                  :label="city.id"
                >
                  {{ city.name }}
                </el-checkbox-button>
              </el-checkbox-group>
            </li>
          </nav>

          <nav class="use_list">
            <p>应用类型：</p>
            <li>
              <span
                :class="{ isactive: dataList.use.length == 0 }"
                @click="getUse()"
              >
                全部
              </span>
              <el-checkbox-group
                v-model="dataList.use"
                size="large"
                @change="changeMedia"
              >
                <el-checkbox-button
                  v-for="city in dataList.useList"
                  :key="city.is"
                  :label="city.id"
                >
                  {{ city.name }}
                </el-checkbox-button>
              </el-checkbox-group>
            </li>
          </nav>
          <nav class="tab_bottom">
            <li>
              <span
                :class="{ isactive: dataList.orders == b.id }"
                @click="getDefault(b.id)"
                v-for="(b, idx) in dataList.bList"
              >
                {{ b.text }}
                <nav v-show="idx !== 0">
                  <img
                    :class="{ isnone: dataList.orders == b.id }"
                    src="@/assets/home/Polygon1.png"
                    alt=""
                  />
                  <img src="@/assets/home/Polygon2.png" alt="" />
                  <img
                    :class="{ isnone: dataList.orders !== b.id }"
                    src="@/assets/home/Polygon1.png"
                    alt=""
                  />
                </nav>
              </span>
            </li>
            <!-- <li>
							<span :class="{isactive:dataList.default}" 
								@click="getDefault">
								默认排序
							</span>
							<span :class="{isactive:dataList.time}"
								@click="getTime('CreateTime')">
								发布时间
								<nav>
									<img :class="{isnone:dataList.time}" src="@/assets/home/Polygon1.png" alt="">
									<img src="@/assets/home/Polygon2.png" alt="">
									<img :class="{isnone:!dataList.time}" src="@/assets/home/Polygon1.png" alt="">
								</nav>
							</span>
							<span :class="{isactive:dataList.hot}"
								@click="getHot('ViewCount')">
								热度
								<nav>
									<img :class="{isnone:dataList.hot}" src="@/assets/home/Polygon1.png" alt="">
									<img src="@/assets/home/Polygon2.png" alt="">
									<img :class="{isnone:!dataList.hot}" src="@/assets/home/Polygon1.png" alt="">
								</nav>
							</span>
							<span :class="{isactive:dataList.sized}"
								@click="getSized('Size')">
								大小
								<nav>
									<img :class="{isnone:dataList.sized}" src="@/assets/home/Polygon1.png" alt="">
									<img src="@/assets/home/Polygon2.png" alt="">
									<img :class="{isnone:!dataList.sized}" src="@/assets/home/Polygon1.png" alt="">
								</nav>
							</span>
						</li> -->
            <div>
              找到素材
              <span>{{ dataList.total }}</span>
              个
            </div>
          </nav>
        </div>
      </template>
    </projectlist>
    <div class="paging">
      <el-pagination
        :pager-count="5"
        background
        small
        layout="prev, pager, next"
        :total="dataList.total"
        :current-page="dataList.page"
        @current-change="changesize"
      />
    </div>
  </div>
</template>

<script setup>
  import { reactive, onBeforeMount, ref } from "vue";
  import {
    getMaterialList,
    getKnowledge,
    getMediaType,
    getApplication,
    getApplicableObjects,
  } from "@/api/home.js";
  import projectlist from "@/components/ProfessionalList.vue";
  const changesize = (value) => {
    dataList.page = value;
    getMaterialListF();
  };
  const getCourse = (id) => {
    if (id == 0) {
      dataList.course = "";
    } else {
      dataList.course = id;
    }

    getMaterialListF();
  };
  const changeMedia = () => {
    console.log(dataList.media.join(","));
    getMaterialListF();
  };
  const changeUse = () => {
    getMaterialListF();
  };
  const getMedia = () => {
    dataList.media = [];
    getMaterialListF();
  };
  const getUse = () => {
    dataList.use = [];
    getMaterialListF();
  };
  const getDefault = (id) => {
    if (dataList.orders == id) {
      dataList.orders = "";
    } else {
      dataList.orders = id;
    }
    getMaterialListF();
  };
  const getTime = (o) => {
    console.log(!dataList.time);
    dataList.time = !dataList.time;
    dataList.default = false;
    dataList.orders = o;
    if (dataList.time) {
      dataList.sort = "asc";
    } else {
      dataList.sort = "DESC";
    }
    getMaterialListF();
  };
  const getHot = (o) => {
    dataList.hot = !dataList.hot;
    dataList.default = false;
    dataList.orders = o;
    if (dataList.hot) {
      dataList.sort = "asc";
    } else {
      dataList.sort = "DESC";
    }
    getMaterialListF();
  };
  const getSized = (o) => {
    dataList.sized = !dataList.sized;
    dataList.default = false;
    dataList.orders = o;
    if (dataList.sized) {
      dataList.sort = "asc";
    } else {
      dataList.sort = "DESC";
    }
    getMaterialListF();
  };
  const dataList = reactive({
    course: "", //所属课程
    media: [], //媒体类型
    use: [], //应用类型
    default: true, //默认排序
    time: false, //发布时间
    hot: false, //热度
    sized: false, //大小
    total: 0,
    page: 1,
    courseList: [],
    mediaList: [],
    useList: [],
    sort: "",
    orders: "",
    tabid: 0,
    materialList: [],
    bList: [
      {
        text: "默认排序",
        id: "",
      },
      {
        text: "发布时间",
        id: "CreateTime",
      },
      {
        text: "热度",
        id: "ViewCount",
      },
      {
        text: "大小",
        id: "Size",
      },
    ],
  });
  onBeforeMount(() => {
    getMaterialListF();
    getKnowledgeF();
    getMediaTypeF();
    getApplicationF();
  });
  const getMaterialListF = () => {
    let data = {
      projectId: "dxhzalctqitlv9umq3wtdg",
      page: dataList.page,
      pagesize: 8,
    };
    if (dataList.media.length) {
      data.array_media = dataList.media.join(",");
    }
    if (dataList.use.length) {
      data.array_application = dataList.use.join(",");
    }
    if (dataList.course) {
      data.nodeId = dataList.course;
    }
    if (dataList.orders) {
      data.orders = `${dataList.orders} ${dataList.sort}`;
    }
    // applicableObjects:'',
    getMaterialList(data).then((res) => {
      console.log(JSON.parse(res.list).obj);
      dataList.materialList = JSON.parse(res.list).obj || [];
      dataList.total = res.materialCount;
    });
  };
  const getKnowledgeF = () => {
    getKnowledge({ projectId: "dxhzalctqitlv9umq3wtdg" }).then((res) => {
      dataList.courseList = JSON.parse(res.knowlist);
    });
  };
  const getMediaTypeF = () => {
    getMediaType({ projectId: "dxhzalctqitlv9umq3wtdg" }).then((res) => {
      dataList.mediaList = JSON.parse(res.media);
    });
  };
  const getApplicationF = () => {
    getApplication({ projectId: "dxhzalctqitlv9umq3wtdg" }).then((res) => {
      dataList.useList = JSON.parse(res.application);
    });
  };
</script>

<style lang="scss" scoped>
  $width: 774px;

  @media screen and (min-width: 1200px) {
    .Professional {
      width: $width;
      margin: 26px auto 0;
    }
    .paging {
      width: 100%;
      margin-bottom: 50px;
      display: flex;
      justify-content: center;
      :deep .is-active {
        background-color: #ff9933 !important;
      }
    }
    .tab_list {
      padding-top: 26px;
      width: $width;
      nav {
        display: flex;
        p {
          margin-top: 5px;
          min-width: 68px;
          font-size: 12px;
          font-weight: bold;
          color: #000;
          margin-bottom: 60px;
        }
        li {
          display: flex;
          span {
            white-space: nowrap;
            min-width: 50px;
            height: 24px;
            line-height: 24px !important;
            padding: 0 12px;
            margin: 0 7px;
            background: #eeeeee;
            border-radius: 12px;
            display: block;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
            color: #000;
            transition: all 0.5s;
          }
          span:hover {
            -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
          }
          .isactive {
            color: #ffffff;
            background-color: #ff9933;
          }
        }
      }
      .tab_bottom {
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 400;
        li {
          margin: 0;
          span {
            display: flex;
            align-items: center;
            nav {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-left: 5px;
              img {
                width: 10px;
                height: 6px;
              }
              .isnone {
                display: none;
              }
            }
          }
        }
        div {
          span {
            color: #ff9933;
          }
        }
      }
      :deep(.el-checkbox-group) {
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        .el-checkbox-button {
          border: none !important;
          margin-right: 15px;
          margin-bottom: 15px;
        }
        .el-checkbox-button__inner {
          min-width: 50px;
          height: 24px;
          line-height: 24px !important;
          padding: 0 12px;
          background: #eeeeee;
          border-radius: 34vw;
          font-size: 12px;
          font-weight: bold;
          color: #000;
          text-align: center;
          cursor: pointer;
          border: none !important;
        }
        .el-checkbox-button__inner:hover {
          -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
        }
      }
      :deep(.is-checked) {
        .el-checkbox-button__inner {
          background-color: #ff9933;
          color: #ffffff;
          border: none !important;
          // border-color: #FF9933!important;
          // border-left-color:#FF9933!important;
        }
      }
    }
  }
  @media screen and (max-width: 1200px) {
    .Professional {
      width: 95vw;
      margin: 0 auto;
      margin-top: 5vw;
    }
    .paging {
      width: 95vw;
      margin-bottom: 6vw;
      display: flex;
      justify-content: center;
      :deep(.is-active) {
        background-color: #ff9933 !important;
      }
    }
    .tab_list {
      padding-bottom: 4vw;
      width: 95vw;
      nav {
        display: flex;
        flex-direction: column;
        p {
          font-size: 2.1vw;
          font-weight: 400;
          color: #333333;
          margin-right: 0.6vw;
          margin-bottom: 3vw;
          white-space: nowrap;
        }
        li {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-bottom: 3vw;
          span {
            padding: 0.9vw 2vw;
            background: #eeeeee;
            border-radius: 3vw;
            display: block;
            margin: 0 0.6vw;
            cursor: pointer;
            font-size: 1.8vw;
            color: #333333;
            margin-bottom: 2vw;
          }
          .isactive {
            color: #ffffff;
            background-color: #ff9933;
          }
        }
      }

      .tab_bottom {
        // align-items: center;
        justify-content: space-between;
        font-size: 1.8vw;
        font-weight: 400;
        li {
          margin: 0;
          span {
            display: flex;
            align-items: center;
            nav {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-left: 0.66vw;
              img {
                width: 2vw;
                height: 1.4vw;
                padding: 0.2vw 0;
              }
              .isnone {
                display: none;
              }
            }
          }
        }
        div {
          font-size: 1.8vw;
          margin-left: 1vw;
          span {
            color: #ff9933;
          }
        }
      }
      :deep .el-checkbox-group {
        display: contents;
        align-items: center;
        justify-content: space-between;
        font-size: 1.8vw;
        font-weight: 400;
        .el-checkbox-button {
          border: none !important;
          margin-right: 2vw;
          margin-bottom: 2vw;
        }
        .el-checkbox-button__inner {
          padding: 1vw 2vw;
          background: #eeeeee;
          border-radius: 34vw;
          font-size: 1.8vw;
          font-weight: 400;
          color: #333333;
          text-align: center;
          cursor: pointer;
          border: none !important;
        }
      }
      :deep .is-checked {
        .el-checkbox-button__inner {
          background-color: #ff9933;
          color: #ffffff;
          border: none !important;
        }
      }
    }
  }
</style>
